﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <%@ include file="../admin/top.jsp" %>

    <style>
        table tr td img {
            height: 25px;
            border-radius: 8%;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="main-container">
<%--    APP用户列表--%>
    <div id="page-content" class="clearfix">
        <div class="row-fluid">
            <div class="row-fluid">
                <!-- 检索  -->
                <form action="account/list" method="post" name="userForm" id="userForm">
                    <input type="hidden" name="menuId" value="${page.menuId}">
                    <input type="hidden" name="sortState" id="sortState" value="${sortState}">
                    <table style="width: 60%">
                        <tr>
                            <td>
                                <span class="input-icon">
                                    <input style="margin-top: 0px;width: 90%;padding-left: 2px" autocomplete="off"
                                           type="text" name="email" value="${email}"
                                           placeholder="用户邮箱"/>
                                </span>
                            </td>
                            <td>
                                <span class="input-icon">
                                    <input style="margin-top: 0px;width: 90%;padding-left: 2px" autocomplete="off"
                                           type="text" name="searchValue" value="${page.searchValue}"
                                           placeholder="用户手机号"/>
                                </span>
                            </td>
                            <td>
                                <span class="input-icon">
                                    <input style="margin-top: 0px;width: 90%;padding-left: 2px" autocomplete="off"
                                           type="text" name="imei" value="${imei}"
                                           placeholder="关联设备号（精准查找）"/>
                                </span>
                            </td>
                            <td style="vertical-align:top;z-index: 1100">
                                <select class="chzn-select" name="state" data-values="${state}" data-placeholder="请选择状态"
                                        style="vertical-align:top;width: 120px;z-index: 1100">
                                    <option value="">选择状态</option>
                                    <option value="0"
                                            <c:if test="${state == 0}">selected</c:if> >启用
                                    </option>
                                    <option value="1"
                                            <c:if test="${state == 1}">selected</c:if> >禁用
                                    </option>
                                </select>
                            </td>
                            <td style="vertical-align:top; z-index: 1100">
                                <button class="btn btn-mini btn-light" onclick="search();" title="检索">
                                    <i id="nav-search-icon" class="icon-search"></i>
                                </button>
                            </td>
                            <td style="vertical-align:top;">
                                <c:if test="${fn:contains(butSet, 'add')}">
                                    <a class="btn btn-small btn-success" onclick="add();">新增</a>
                                </c:if>
                            </td>
                        </tr>
                    </table>
                    <!-- 检索  -->
                    <table id="table_report" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>个人信息</th>
                            <th>邮箱账号</th>
                            <th>手机账号</th>
                            <th>关联微信</th>
                            <th>关联设备</th>
                            <th>版本号</th>
                            <th>账号状态</th>
                            <th style="z-index: 1100;">
                                <c:choose>
                                    <c:when test="${sortState == 1}">
                                        <a onclick="changeSortState(0)" href="javascript:void(0)"
                                           style="text-decoration:none;">
                                            注册时间 ↑
                                        </a>
                                    </c:when>
                                    <c:otherwise>
                                        <a onclick="changeSortState(1)" href="javascript:void(0)"
                                           style="text-decoration:none;">
                                            注册时间 ↓
                                        </a>
                                    </c:otherwise>
                                </c:choose>
                            </th>
                            <th style="z-index: 1100">
                                <c:choose>
                                    <c:when test="${sortState == 3}">
                                        <a onclick="changeSortState(2)" href="javascript:void(0)"
                                           style="text-decoration:none;">
                                            最后一次登录时间 ↑
                                        </a>
                                    </c:when>
                                    <c:otherwise>
                                        <a onclick="changeSortState(3)" href="javascript:void(0)"
                                           style="text-decoration:none;">
                                            最后一次登录时间 ↓
                                        </a>
                                    </c:otherwise>
                                </c:choose>
                            </th>
                            <th class="center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 开始循环 -->
                        <c:choose>
                            <c:when test="${not empty accounts}">
                                <c:forEach items="${accounts}" var="account">
                                    <tr style="text-align: center">
                                        <td>
                                                ${(account.name == null)?"未设置":account.name}
                                                (${account.id})
                                        </td>
                                        <td>${account.email}</td>
                                        <c:choose>
                                            <c:when test="${not empty account.wxName}">
                                                <td>${account.phone }</td>
                                                <td>
                                                    <a class="" style="cursor:pointer;" data-toggle="modal"
                                                       data-target="#myModal"
                                                       onclick="showWechat('${account.id}', '${account.wxName}', '${account.sex}', '${account.unionid}')">
                                                            ${account.wxName}
                                                    </a>
                                                </td>
                                            </c:when>
                                            <c:otherwise>
                                                <td>(+${account.countryCode })${account.phone }</td>
                                                <td></td>
                                            </c:otherwise>
                                        </c:choose>
                                        <td>
                                            <c:if test="${not empty account.deviceMap}">
                                                <c:forEach items="${account.deviceMap}" var="bindDevice">
                                                    ${bindDevice.key}(${bindDevice.value.relationship})
                                                    <br/>
                                                </c:forEach>
                                            </c:if>
                                        </td>
<%--                                        <td>${account.channel }</td>--%>
                                        <td>
                                            <c:if test="${not empty account.version}">
                                                ${account.version} -- ${account.mobileType}
                                            </c:if>
                                        </td>
                                        <c:choose>
                                            <c:when test="${account.forbiddenStatus == '1'}">
                                                <td style="color: red">禁用</td>
                                            </c:when>
                                            <c:otherwise>
                                                <td style="color: blue">启用</td>
                                            </c:otherwise>
                                        </c:choose>
                                        <td><fmt:formatDate value="${account.registerDate }"
                                                            pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td><fmt:formatDate value="${account.loginDate }"
                                                            pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        <td style="width: 60px;">
                                            <div class='hidden-phone visible-desktop btn-group'>
                                                <c:if test="${fn:contains(butSet, 'pwd')}">
                                                    <a class='btn btn-mini btn-info'
                                                       onclick="updatePwd('${account.id }');">
                                                        修改
                                                    </a>
                                                </c:if>
                                                <c:if test="${fn:contains(butSet, 'forbidden')}">
                                                    <c:choose>
                                                        <c:when test="${account.forbiddenStatus == '1'}">
                                                            <a class='btn btn-mini btn-info'
                                                               onclick="forbidden('${account.id }', '${account.forbiddenStatus }', '${account.name }');">
                                                                启用
                                                            </a>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <a class='btn btn-mini btn-danger'
                                                               onclick="forbidden('${account.id }', '${account.forbiddenStatus }', '${account.name }');">
                                                                禁用
                                                            </a>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </c:if>
                                                <c:if test="${fn:contains(butSet, 'del')}">
                                                    <a class='btn btn-mini btn-danger' title="删除"
                                                       onclick="del('${account.id }','${account.name }');">
                                                        <i class='icon-trash'></i>
                                                    </a>
                                                </c:if>
                                            </div>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </c:when>
                            <c:otherwise>
                                <tr class="main_info">
                                    <td colspan="10" class="center">没有相关数据</td>
                                </tr>
                            </c:otherwise>
                        </c:choose>
                        </tbody>
                    </table>
                    <div class="page-header position-relative">
                        <table style="width:100%;">
                            <tr>
                                <td style="vertical-align:top;">
                                    <div class="pagination"
                                         style="float: right;padding-top: 0px;margin-top: 0px;">${page.pageStr}</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="myModal" class="modal fade" role="dialog" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">微信信息</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="openid" style="display: contents;font-weight: bold">账号openid： </label>
                    <input style="width: 300px;" id="openid" name="openid" minlength="6" maxlength="16" type="text" disabled />
                </div>
                <div class="form-group">
                    <label for="name" style="display: contents;font-weight: bold">微信 昵称： </label>
                    <input style="width: 300px;" id="name" minlength="6" maxlength="16" name="name" type="text" disabled />
                </div>

<%--                <div class="form-group">--%>
<%--                    <label for="sex" style="display: contents;font-weight: bold">微信 性别： </label>--%>
<%--                    <input style="width: 300px;" id="sex" minlength="6" maxlength="16" name="sex" type="text" disabled/>--%>
<%--                </div>--%>
                <div class="form-group">
                    <label for="openid" style="display: contents;font-weight: bold">微信unionid： </label>
                    <input style="width: 300px;" id="unionid" name="unionid" minlength="6" maxlength="16" type="text" disabled />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 返回顶部  -->
<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
    <i class="icon-double-angle-up icon-only"></i>
</a>
<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>

<script type="text/javascript" src="static/js/chosen.jquery.min.js"></script><!-- 下拉框 -->
<script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script><!-- 日期框 -->
<script type="text/javascript" src="static/js/bootbox.min.js"></script><!-- 确认窗口 -->
<!-- 引入 -->
<script type="text/javascript" src="static/js/jquery.tips.js"></script><!--提示框-->
<script type="text/javascript">
    $(top.hangge());

    //检索
    function search() {
        top.jzts();
        $("#userForm").submit();
    }

    //排序查找
    function changeSortState(state) {
        $("#sortState").val(state);
        top.jzts();
        $("#userForm").submit();
    }

    //修改密码
    function updatePwd(id) {
        top.jzts();
        var diag = new top.Dialog();
        diag.Drag = true;
        diag.Title = "修改密码";
        diag.URL = '<%=basePath%>account/toUpdatePwd?id=' + id;
        diag.Width = 400;
        diag.Height = 550;
        diag.CancelEvent = function () { //关闭事件
            if (diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none') {
                if ('${page.currentPage}' == '0') {
                    top.jzts();
                    //setTimeout("self.location=self.location",100);
                    $("#userForm").submit();
                } else {
                    nextPage(${page.currentPage});
                }
            }
            diag.close();
        };
        diag.show();
    }

    //删除
    function del(id, name) {
        bootbox.confirm("是否删除[" + name + "]?", function (result) {
            if (result) {
                top.jzts();
                var url = "<%=basePath%>account/del";
                var param = {"id":id, "tm":new Date().getTime(), "menuId":"${page.menuId}" };

                $.post(url, param, function (data) {
                    if (data.code == 200) {
                        alert("删除成功! "+data.msg);
                        nextPage(${page.currentPage});
                    } else {
                        alert(data.msg)
                    }
                });
            }
        });
    }

    //启用、禁用
    function forbidden(id, status, name) {
        var msg = "";
        if (status == '1') {
            msg = "是否启用[" + name + "]？";
            status = '0';
        } else {
            msg = "是否禁用[" + name + "]？";
            status = '1';
        }
        bootbox.confirm(msg, function (result) {
            if (result) {
                top.jzts();
                var postParam = {"id": id, "forbiddenStatus": status, "menuId":"${page.menuId}"};
                var url = "<%=basePath%>account/updateForbiddenStatus";
                $.post(url, postParam, function (data) {
                    if (data.code == 200) {
                        nextPage(${page.currentPage});
                    }
                });
            }
        });
    }
    function add() {
        top.jzts();
        var diag = new top.Dialog();
        diag.Drag = true;
        diag.Title = "添加用户";
        diag.URL = "<%=basePath%>account/toAdd";
        diag.Width = 500;
        diag.Height = 650;
        diag.CancelEvent = function () { //关闭事件
            if (diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none') {
                if ('${page.currentPage}' == '0') {
                    top.jzts();
                    $("#userForm").submit();
                } else {
                    nextPage(${page.currentPage});
                }
            }
            diag.close();
        };
        diag.show();
    }
    //展示微信的信息
    function showWechat(id, name, sex, unionid) {
        document.getElementById("myModal").style.display="";//显示
        $("#openid").val(id);
        $("#name").val(name);
        $("#sex").val(sex);
        $("#unionid").val(unionid);
    }
</script>
<script type="text/javascript">
    $(function () {
        //下拉框
        $(".chzn-select").chosen({disable_search: true});
        $(".chzn-select-deselect").chosen({allow_single_deselect: true});
        //复选框
        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });
        });
    });
</script>
</body>
</html>
